<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>亿人宝 - 项目详细</title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/detail.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/product/pro-detail.css}" type="text/css">
    <script th:src="@{/bootstrap/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/common.js}" type="text/javascript"></script>
    <script th:src="@{/script/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/axios.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/ablumn.js}" type="text/javascript"></script>
    <script th:src="@{/script/plugins.js}" type="text/javascript"></script>
    <script th:src="@{/script/detail.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layer/layer.js}" type="text/javascript"></script>
</head>
<style type="text/css">
    .background_none {
        background: none !important;
    }

    .hide {
        display: none;
    }

    .personal-main {
        float: left;
        width: auto;
        height: auto;
        margin-top: 10px;
        color: #848484;
    }

    .deposit-form li {
        float: none;
        height: 40px;
        padding: 10px 0;
        width: 350px;
        position: relative;
    }

    .personal-deposit {
        float: none;
        width: auto;
        color: #848484;
        height: auto;
        background: #fff;
        padding: 0 68px 0;
        font-size: 14px;
    }

    .deposit-form {
        float: none;
        margin-top: 35px;
        width: 0px;
        height: 278px;
        border-top: 1px dashed #D5D5D5;
        padding-top: 35px;
    }

    .deposit-form .deposit-formleft {
        float: left;
        width: 96px;
        text-align: right;
        line-height: 40px;
    }

    .deposit-form .deposit-formright {
        float: left;
        margin-left: 27px;
        line-height: 40px;
    }

    .deposit-form .deposit-formright i {
        font-size: 18px;
        color: #FF6565;
    }

    b, em, i, u {
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
    }

    .deposit-form .deposit-formright .deposite-txt {
        float: left;
        width: 158px;
        height: 34px;
        line-height: 34px;
        color: #A6A6A6;
        padding-left: 12px;
        border: 1px solid #D0D0D0;
        border-radius: 2px;
        margin-right: 10px;
    }

    .error {
        float: left;
        color: #FF6565;
        padding-left: 25px;
        background: url('[[@{/images/top-icon.png}]]') -10px -410px no-repeat;
        height: 26px;
        padding-top: 6px;
        display: inline-block;
        margin-top: 5px;
        font-size: 12px;
        margin-left: 5px;
    }

    .deposit-form em {
        margin-top: 10px;
    }

    .markicon {
        background: url('[[@{/images/grzx.png}]]') 0 -240px;
        width: 21px;
        height: 18px;
        display: inline-block;
        margin-left: 5px;
        cursor: pointer;
    }

    .fp {
        float: left;
    }

    .deposit-form .txarrow-show, .deposit-form .dzarrow-show {
        position: absolute;
        top: -20px;
        left: 50px;
        background: #FFFBE9;
        border: 1px solid #FBF3D1;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        display: none;
        font-size: 12px;
    }

    .deposit-form .txicon-show, .deposit-form .dzicon-show {
        position: absolute;
        top: 10px;
        left: 97px;
        background: url(../../images/grzx.png) -75px -240px;
        width: 19px;
        height: 7px;
        display: none;
    }

    .deposit-form .btn-depositok {
        float: left;
        margin-left: 123px;
        width: 113px;
        height: 40px;
        line-height: 40px;
        background-color: #0caffe;
        border: none;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
    }

    .alert-450 {
        float: left;
        width: 450px;
        border: 1px solid #E1E1E1;
        box-shadow: 0 0 3px #E1E1E1;
        position: absolute;
        z-index: 100;
        top: 50%;
        left: 50%;
        margin-left: -225px;
        background: #fff;
    }

    .alert-main {
        float: left;
        height: auto;
        color: #494949;
        font-size: 14px;
    }

    .alert-main form {
        float: left;
        padding: 40px 0 27px;
    }

    .alert-main form li {
        float: left;
        width: 400px;
    }

    .alert-main form .txt-name {
        float: left;
        width: 120px;
        height: 35px;
        line-height: 35px;
        text-align: right;
        margin-right: 13px;
    }

    .alert-main form input[type=text] {
        float: left;
        height: 17px;
        line-height: 17px;
        padding: 8px 0 8px 5px;
        border: 1px solid #D0D0D0;
        border-radius: 2px;
    }

    .alert-main form input[type=text] {
        float: left;
        height: 17px;
        line-height: 17px;
        padding: 8px 0 8px 5px;
        border: 1px solid #D0D0D0;
        border-radius: 2px;
    }

    .alert-main form .txt235 {
        width: 230px;
        line-height: 33px;
    }

    .alert-main form .txt-right {
        float: left;
        margin-left: 133px;
    }

    .alert-main .btn-ok {
        margin-top: 5px;
        display: inline-block;
        text-align: center;
        width: 237px;
        height: 35px;
        font-size: 14px;
        background: #0caffe;
        line-height: 35px;
        color: #fff;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    }

    .pay-bank {
        /*float: left;*/
        width: auto;
        height: auto;
    }

    .pay-bank h6 {
        font-size: 14px;
        color: #4A4A4A;
        font-weight: bold;
        height: 42px;
        line-height: 42px;
    }

    .pay-bank ul {
        /*float: left;*/
        margin-left: -15px;
        width: 708px;
        height: 160px;
    + height: 150 px;
        overflow: hidden;
        position: relative;
    }

    .pay-bank ul {
        width: 354px;
    }

    .pay-bank li {
        float: left;
        margin-left: 15px;
        padding-bottom: 18px;
        position: relative;
        width: auto;
        padding: 0px 0;
        margin-bottom: 16px;
        height: 59px;
    }

    .pay-bank li .on {
        border: 1px solid #f1483c;
    }

    .pay-bank li div {
        border: 1px solid #D0D0D0;
        border-radius: 2px;
        width: 160px;
        height: 57px;
    }

    .pay-bank li i {
        background: url('[[@{/images/grzx.png}]]') 0 -399px;
        width: 26px;
        height: 26px;
        position: absolute;
        right: 0;
        top: 32px;
    }

    .sequence {
        width: 1000px;
        margin: 50px auto 0;
        color: #666;
    }

    .sequence span {
        font-size: 18px;
        color: #ef7a46;
        top: 2px;
        position: relative;
        padding: 0 2px;
    }

    .panel {
        overflow: hidden;
        margin-top: 20px;
    }

    .panel .box {
        /*width: 500px;*/
        /*height: 270px;*/
        padding: 20px 0;
        float: left;
        overflow: hidden;
        text-align: center;
    }

    .panel .box h6 {
        font-size: 14px;
        color: #999;
        text-align: left;
        height: 30px;
        line-height: 30px;
    }


</style>
<body>
<div id="app">
    <div th:replace="common/public::head"></div>
    <!--信息详细-->
    <input id="pid" th:value="${id}" type="hidden">
    <div class="item-detail wrap">
        <div class="breadcrumbs"><a th:href="@{/}">首页</a>&gt;
            <a th:href="@{/base/product-list}">投资列表</a>&gt; <span
                    class="cur">项目详情</span></div>
        <div class="item-detail-head clearfix" data-target="sideMenu">
            <div class="hd">
                <!--<i class="icon icon-che" title="车易贷"></i>-->
                <h2 v-text="product.pname"></h2>
            </div>
            <div class="bd clearfix">
                <div class="data">
                    <ul>
                        <li><span class="f16">总金额</span><br>
                            <span class="f30 c-333" id="account" v-text="product.total"></span>元
                        </li>
                        <li class="relative"><span class="f16">年利率</span><br>
                            <span class="f30 c-orange">{{product.rate * 100 | formatDouble}}% </span></li>
                        <li v-if="product.type != 4"><span class="f16">锁定期限</span><br>
                            <span class="f30 c-333" v-text="product.lockDateMonth"></span>个月
                        </li>
                        <li v-if="product.type == 4"><span class="f16">项目期限</span><br>
                            <span class="f30 c-333" v-text="product.lockDateMonth"></span>个月
                        </li>
                        <li v-if="product.type == 4"><span class="c-888">借款编号：</span>{{loan.lid}}</li>
                        <li><span class="c-888">发标日期：</span>{{product.startDate | formatDate}}</li>
                        <li><span class="c-888">保障方式：</span>100%本息垫付</li>
                        <li v-if="product.type == 4"><span class="c-888">还款方式：</span>按月付息,到期还本</li>
                        <li v-if="product.type == 4"><span class="c-888">贷款类型：</span>{{loan.loantype}}</li>
                        <li v-if="product.type == 4"><span class="c-888">借款用途：</span>{{loan.loanuse}}</li>
                        <li class="colspan"><span class="c-888 fl">项目进度：</span>
                            <div class="progress-bar fl"><span
                                    :style="{width: (product.haveMoney/product.total).toFixed(2)*100 +'%'}"></span>
                            </div>
                            <span class="c-green">{{(product.haveMoney/product.total)*100 | formatDouble}}%</span>
                        </li>
                        <li><span class="c-888">投资范围：</span> <span
                                id="account_range" v-text="product.purchaseAmount+'元~不限'"></span></li>
                    </ul>
                </div>
                <div class="mod-right mod-status background_none">
                    <div class="inner">
                        <!--<div v-if="product.type == 4" class="text"> 待还本息：<span class="f24 c-333">40,400.00</span>元<br>
                            剩余期限：<span class="f24 c-333">29天</span> <br>
                            下期还款日： <span class="f20 c-333">2015-10-13</span>
                        </div>-->
                        <i :class="{'icon-status':(product.haveMoney/product.total) >= 1}"
                           class="icon icon-status3"></i>
                    </div>
                    <a @click="showBuy" class="ui-btn btn-buy" style="left: 225px;
                                                bottom: 20px;
                                                position: absolute;
                                                width: 89px;
                                                background: #75A52F;"
                       v-if="(product.haveMoney/product.total) < 1">购买</a>
                </div>
            </div>
        </div>
        <div class="item-detail-head clearfix" data-target="sideMenu" style="margin-top: 25px;">
            <div class="plan-content">
                <ul class="plan g-cf">
                    <li class="plan-item plan-item1 active"><p class="p1">加入</p>
                        <p class="p2"></p>
                        <p class="p3">匹配项目</p></li>
                    <li class="plan-item plan-item2"><p class="p1">开始收益</p>
                        <p class="p2"></p>
                        <p class="p3"><span class="js_term" v-text="product.lockDateMonth"></span>个月锁定期</p></li>
                    <li class="plan-item plan-item3"><p class="p1">锁定期结束</p>
                        <p class="p2"></p>
                        <p class="p3">锁定期结束自动转让</p></li>
                    <li class="plan-item plan-item4"><i></i><i></i><i></i></li>
                </ul>
            </div>
        </div>
        <div class="item-detail-body clearfix mrt30 ui-tab">
            <div class="ui-tab-nav hd"><i class="icon-cur" style="left: 39px;"></i>
                <ul>
                    <li class="nav_li active" id="nav_1" v-if="product.type != 4"><a href="javascript:">工具介绍</a></li>
                    <li class="nav_li" id="nav_2" v-if="product.type == 4"><a href="javascript:">项目详情</a></li>
                    <li class="nav_li" id="nav_3" v-if="product.type != 4"><a href="javascript:">投标项目分析</a></li>
                    <li class="nav_li" id="nav_4" v-if="product.type == 4"><a href="javascript:">借款人信息</a></li>
                    <li class="nav_li" id="nav_5"><a href="javascript:">投标记录</a></li>
                </ul>
            </div>
            <div class="bd" style="padding: 0 55px 25px;">
                <!--工具介绍-->
                <div class="ui-tab-item" style="display: block;" v-if="product.type != 4">
                    <div class="item introduce tableList" id="introduceModel"><h3 class="title"
                                                                                  style="color: #000;font-weight: 700;margin-bottom: 20px;margin-top: 20px;">
                        单车变摩托介绍</h3>
                        <p class="extend-describe">
                            单车变摩托是亿人宝平台推出的便捷高效的委托投标工具，出借人委托平台将资金投向平台项目，且回款本息由出借人委托系统复投，保障资金利用率。锁定期结束后自动发起债权转让，系统优先协助本产品出借人完成债转退出。</p>
                        <div class="extend-describe-pic g-cf">
                            <dl class="d1 g-fl">
                                <dt>自动投标，省心便捷</dt>
                                <dd>委托平台自动分散投标，风险更可控</dd>
                            </dl>
                            <dl class="d2 g-fl">
                                <dt>自动复投，收益可观</dt>
                                <dd>锁定期内回款自动复投，保障资金利用率</dd>
                            </dl>
                            <dl class="d3 g-fr">
                                <dt>到期自动转让</dt>
                                <dd>锁定期结束系统自动发起转让退出，回款省心</dd>
                            </dl>
                        </div>
                        <table>
                            <tbody>
                            <tr>
                                <td class="nape">投标项目总额</td>
                                <td v-text="product.total+'元'"></td>
                            </tr>
                            <tr>
                                <td class="nape">加入规则</td>
                                <td v-text="product.purchaseAmount+'元起投，100.00元递增，单笔限额'+product.total+'元，累计限额'+product.total+'元'">
                                </td>
                            </tr>
                            <tr>
                                <td class="nape">开始收益</td>
                                <td>加入后系统实时匹配标的，匹配成功后次日开始计息</td>
                            </tr>
                            <tr>
                                <td class="nape">转让规则</td>
                                <td>锁定期结束后，系统经出借人授权下自动发起债权转让退出单车变摩托投标工具，具体退出时间以出借人持有债权全部退出完成时间为准。退出期间可继续享有收益，平台不保证退出时效。
                                </td>
                            </tr>
                            <tr>
                                <td class="nape">费用说明</td>
                                <td>加入费用：0元；</td>
                            </tr>
                            </tbody>
                        </table>
                        <h3 class="title" style="margin-bottom:0">常见问题</h3>
                        <dl class="extend-question">
                            <dt><span>问：</span>单车变摩托有哪些期限及对应的参考利率？</dt>
                            <dd><span>答：</span>
                                <p>新手标：7天，5%+5%；1个月，6%+6%；3个月，7%+5.5%；<br>普通标：7天，5%；3个月，7.0%；6个月，7.70%；12个月，9%；24个月，10.00%
                                </p></dd>
                        </dl>
                        <dl class="extend-question">
                            <dt><span>问：</span>加入单车变摩托后平台如何匹配项目？</dt>
                            <dd><span>答：</span>
                                <p>系统会实时匹配项目，成功匹配后次日起息，锁定期间回款将自动复投，保证收益不断档。</p></dd>
                        </dl>
                        <dl class="extend-question">
                            <dt><span>问：</span>加入单车变摩托后，可以看到具体投向的借款项目么？</dt>
                            <dd><span>答：</span>
                                <p>可以，平台将委托资金分散投标向平台的借款项目。在“我的-网贷-单车变摩托”中，点击相应单车变摩托项目，进入二级详情页可以看到单车变摩托的投标项目列表。</p></dd>
                        </dl>
                        <dl class="extend-question">
                            <dt><span>问：</span>单车变摩托产品如何退出？</dt>
                            <dd><span>答：</span>
                                <p>锁定期结束后，系统经出借人授权下自动发起债权转让退出单车变摩托投标工具，转让不收取费用。锁定期内不可转让退出。</p></dd>
                        </dl>
                        <dl class="extend-question">
                            <dt><span>问：</span>单车变摩托发起债权转让退出，多长时间成功？</dt>
                            <dd><span>答：</span>
                                <p>
                                    用户持有单车变摩托锁定期结束后，系统会及时并尽力寻找合适的债权受让人，但不排除存在交易撮合延迟或失败的情况，具体转让时间以出借人持有债权全部完成转让时间为准。转让期间可继续享有收益，平台不保证转让时效。</p>
                            </dd>
                        </dl>
                    </div>
                </div>
                <!--项目详情-->
                <div class="ui-tab-item " style="display: block;" v-if="product.type == 4">
                    <div class="item introduce tableList" id="introduceModel" style="display: block;"><h3 class="title"
                                                                                                          style="color: #000;font-weight: 700;margin-bottom: 20px;margin-top: 20px;">
                        项目简介与风险评估</h3>
                        <div class="extend-describe">本项借款属于个人借款，借款总金额{{loan.money}}元。借款人{{loan.loanname}}个人资质已通过审核，
                            申请信息已核实，结合资料审查和风险项综合评估，其还款能力符合要求。根据借款人当前情况评估，其还款来源能够覆盖借款本息且还款意愿良好。但不排除未来因宏观经济、市场产品价格波动、经营不善等因素导致借款人经营情况、财务状况恶化，从而发生逾期的可能
                            。
                        </div>
                        <h3 class="title" style="color: #000;font-weight: 700;margin-bottom: 20px;margin-top: 20px;">
                            借款用途</h3>
                        <div class="extend-describe">{{loan.loanuse}}</div>
                        <h3 class="title" style="margin-bottom:0;color: #000;font-weight: 700">常见问题</h3>
                        <dl class="extend-question">
                            <dt><span>问：</span>散标主要包括哪些项目？</dt>
                            <dd><span>答：</span>
                                <p>散标主要包括信用借款、消费分期借款、房产抵押借款、车辆抵押借款等项目。</p></dd>
                        </dl>
                        <dl class="extend-question">
                            <dt><span>问：</span>散标项目的亮点是什么？</dt>
                            <dd><span>答：</span>
                                <p>（1）100元起投，7%-13%的参考利率，门槛低，收益稳健</p>
                                <p>（2）1个月及以上等多种期限</p>
                                <p>（3）透明的购买过程，更安心</p>
                                <p>（4）一次性还款、等额本息还款等多种还款方式</p></dd>
                        </dl>
                        <dl class="extend-question">
                            <dt><span>问：</span>散标项目安全吗？有担保吗？</dt>
                            <dd><span>答：</span>
                                <p>散标项目经过严格的风控审查，包括征信报告、资金流水、资产状况、还款能力等；散标项目对应逾期借款均由其资产推荐方提供代偿或回购。</p></dd>
                        </dl>
                    </div>
                </div>
                <!--投标项目分析-->
                <div class="ui-tab-item" style="display: none;" v-if="product.type != 4">
                    <div>
                        <div class="sequence">投资总金额
                            <span v-text="product.haveMoney"></span>元
                            <!--， 共计<span>{{thisInvestList.length}}</span>次投资-->
                        </div>
                        <div class="panel">
                            <div class="box" data-type="amount"><h6>投资金额分布</h6>
                                <div id="money" style="width: 500px;height:500px;"></div>
                            </div>
                            <div class="box" data-type="sex" style="margin-left: 50px;"><h6>性别分布</h6>
                                <div id="sex" style="width: 500px;height:500px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--借款人信息-->
                <div class="ui-tab-item" style="display: none;" v-if="product.type == 4">
                    <div class="borrow-info">
                        <dl class="item">
                            <dt>
                                <h3>借款人介绍</h3>
                            </dt>
                            <dd>
                                <div class="text">
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;"> 借款人信息介绍：</p>
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;">
                                        借款人{{loan.loanname}}，户籍地址为{{loan.address}}，现居住于{{loan.workaddress}}。</p>
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;"> 借款人工作情况：</p>
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;">
                                        职业为{{loan.work}},工作地址{{loan.workaddress}},月收入<span>{{loan.monthmoney}}</span>，收入居住稳定。</p>
                                    <!--<p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;"> 借款人资产介绍：</p>
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;"> 赵女士有<span>1</span>辆全款长安福特福克斯汽车。-->
                                    </p>
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;"> 详细资金用途：</p>
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;">
                                        借款人申请{{loan.loantype}}，贷款用于{{loan.loanuse}}。</p>
                                </div>
                            </dd>
                        </dl>
                        <dl class="item">
                            <dt>
                                <h3>审核信息</h3>
                            </dt>
                            <dd>
                                <div class="verify clearfix">
                                    <ul>
                                        <li><i class="icon icon-4"></i><br>
                                            身份证
                                        </li>
                                        <li><i class="icon icon-5"></i><br>
                                            户口本
                                        </li>
                                        <li><i class="icon icon-6"></i><br>
                                            结婚证
                                        </li>
                                        <li><i class="icon icon-7"></i><br>
                                            工作证明
                                        </li>
                                        <li><i class="icon icon-8"></i><br>
                                            工资卡流水
                                        </li>
                                        <li><i class="icon icon-9"></i><br>
                                            收入证明
                                        </li>
                                        <li><i class="icon icon-10"></i><br>
                                            征信报告
                                        </li>
                                        <li><i class="icon icon-11"></i><br>
                                            亲属调查
                                        </li>
                                        <li><i class="icon icon-19"></i><br>
                                            行驶证
                                        </li>
                                        <li><i class="icon icon-20"></i><br>
                                            车辆登记证
                                        </li>
                                        <li><i class="icon icon-21"></i><br>
                                            车辆登记发票
                                        </li>
                                        <li><i class="icon icon-22"></i><br>
                                            车辆交强险
                                        </li>
                                        <li><i class="icon icon-23"></i><br>
                                            车辆商业保险
                                        </li>
                                        <li><i class="icon icon-24"></i><br>
                                            车辆评估认证
                                        </li>
                                    </ul>
                                </div>
                            </dd>
                        </dl>
                        <dl class="item">
                            <dt>
                                <h3>风控步骤</h3>
                            </dt>
                            <dd>
                                <div class="text">
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;">
                                        调查：风控部对借款人各项信息进行了全面的电话征信，一切资料真实可靠。<span></span></p>
                                    <!--<p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;">
                                        抵押物：全款长安福特福克斯汽车，车牌号：川<span>AYY***</span>，新车购买于<span>2013</span>年，裸车价<span>14</span>万，评估价<span>5</span>万。
                                    </p>
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;">
                                        权证：汽车已入库、已办理相关手续等。 </p>
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;"> 担保：质押物担保。 </p>-->
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;"> 结论：借款人居住稳定，收入来源可靠，经风控综合评估，同意放款<span>{{loan.money}}</span>元。
                                    </p>
                                    <p class="MsoNormal" style="margin-left:0cm;text-indent:0cm;">
                                        保障：借款逾期<span>48</span>小时内，易贷风险准备金先行垫付。 </p>
                                </div>
                                <div class="step clearfix">
                                    <ul>
                                        <li><i class="icon icon-1"></i>资料审核</li>
                                        <li><i class="icon icon-2"></i>实地调查</li>
                                        <li><i class="icon icon-3"></i>资产评估</li>
                                        <li class="no"><i class="icon icon-4"></i>发布借款</li>
                                    </ul>
                                </div>
                                <div class="conclusion f16"> 结论：经风控部综合评估， <span class="c-orange">同意放款{{loan.money}}元；</span>
                                    <i class="icon icon-status icon-status1"></i></div>
                            </dd>
                        </dl>
                        <dl class="item">
                            <dt>
                                <h3>权证信息</h3>
                            </dt>
                            <dd>
                                <div class="warrant"><span class="f14 c-888">（注：为保护借款人的个人隐私信息，实物材料对部分信息进行了隐藏处理）</span>
                                    <div class="album" id="album">
                                        <div class="album-show">
                                            <div class="loading" style="display: none;"></div>
                                            <img th:src="@{/images/news.jpg}"></div>
                                        <div class="album-thumb"><a class="btn btn-prev" href="javascript:"></a> <a
                                                class="btn btn-next" href="javascript:"></a>
                                            <div class="container"
                                                 id="albumThumb"
                                                 style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 1070px;">
                                                <ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 1926px; left: 0px;">
                                                    <li style="overflow: hidden; float: left; width: 164px; height: 108px;">
                                                        <a class="small_img" id="images/news.jpg"><img
                                                                th:src="@{/images/news.jpg}"></a></li>
                                                    <li style="overflow: hidden; float: left; width: 164px; height: 108px;">
                                                        <a class="small_img" id="images/news.jpg"><img
                                                                th:src="@{/images/news.jpg}"></a></li>
                                                    <li style="overflow: hidden; float: left; width: 164px; height: 108px;">
                                                        <a class="small_img" id="images/news.jpg"><img
                                                                th:src="@{/images/news.jpg}"></a></li>
                                                    <li style="overflow: hidden; float: left; width: 164px; height: 108px;">
                                                        <a class="small_img" id="images/news.jpg"><img
                                                                th:src="@{/images/news.jpg}"></a></li>
                                                    <li style="overflow: hidden; float: left; width: 164px; height: 108px;">
                                                        <a class="small_img" id="images/news.jpg"><img
                                                                th:src="@{/images/news.jpg}"></a></li>
                                                    <li style="overflow: hidden; float: left; width: 164px; height: 108px;">
                                                        <a class="small_img" id="images/news.jpg"><img
                                                                th:src="@{/images/news.jpg}"></a></li>
                                                    <li style="overflow: hidden; float: left; width: 164px; height: 108px;">
                                                        <a class="small_img" id="images/news.jpg"><img
                                                                th:src="@{/images/news.jpg}"></a></li>
                                                    <li style="overflow: hidden; float: left; width: 164px; height: 108px;">
                                                        <a class="small_img" id="images/news.jpg"><img
                                                                th:src="@{/images/news.jpg}"></a></li>
                                                    <li style="overflow: hidden; float: left; width: 164px; height: 108px;">
                                                        <a class="small_img" id="images/news.jpg"><img
                                                                th:src="@{/images/news.jpg}"></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
                <!--投标记录-->
                <div class="ui-tab-item" style="display: none;">
                    <div class="repayment-list"> 目前投标总额：<span class="c-orange" v-text="product.haveMoney+'元'"></span>&nbsp;&nbsp;
                        剩余投标金额：<span class="c-orange" v-text="product.total - product.haveMoney+'元'"></span>
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tbody>
                            <tr>
                                <th>投标人</th>
                                <th>投标金额</th>
                                <th>投标时间</th>
                                <th>投标方式</th>
                            </tr>
                            </tbody>
                            <tbody id="repayment_content">
                            <tr v-for="invest in thisInvestList">
                                <td v-text="invest.user.name.split('')[0]+'**'"></td>
                                <td><span class="c-orange" v-text="'￥'+invest.investMoney"></span></td>
                                <td>{{invest.investDate | formatDate}}</td>
                                <td>自动</td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr class="page-outer">
                                <td align="center" colspan="4">
                                    <div class="pagination clearfix">
                                        <span class="page"></span>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--网站底部-->
    <div th:replace="common/public::footer"></div>

    <!--购买页面-->
    <div id="buyDiv" style="display: none">
        <div class="personal-main">
            <div class="personal-deposit">
                <!-- <h3><i>提现</i></h3>-->
                <form id="form" method="post" name="form" onsubmit="return false;">
                    <input name="form" type="hidden" value="form">
                    <div class="deposit-form" style="margin-top:0px;border-top:0px none;">
                        <!-- <h6>填写投资金额</h6>-->
                        <ul>
                            <li>
                                <span class="deposit-formleft">可用余额</span> <span class="deposit-formright">
                                <i><label id="form:blance">{{user.balance | numberFormat}}</label></i>元 </span>
                            </li>
                            <li>
                                <span class="deposit-formleft">投资金额</span> <span class="deposit-formright">
                                <input class="deposite-txt" id="form:actualMoney" maxlength="10" name="form:actualMoney"
                                       type="text" v-model="investMoney">元</span>
                                <span id="actualMoneyErrorDiv">
                                    <span class="error" id="actualMoney_message" style="display:none"></span>
                                </span>
                            </li>
                            <li>
                                <span class="deposit-formleft">预计收益金额</span> <em class="markicon fp" id="dzje"></em>
                                <span class="deposit-formright deposit-formright1" style="margin-left: 7px"> <i><label
                                        id="form:cashFine">{{profit}}</label></i>元</span>
                                <span class="dzarrow-show">最终结果以实际为准</span><span class="dzicon-show"></span>
                            </li>
                            <li>
                                <span class="deposit-formleft">实际支付金额</span>
                                <span class="deposit-formright deposit-formright1" style="margin-left: 33px"> <i><label
                                        id="form:">{{realpay - redpacket}}</label></i>元</span>
                            </li>
                            <li :class="{'hide':redpacketList.length<=0}">
                                <span class="deposit-formleft">红包</span>
                                <span class="deposit-formright deposit-formright1" id="red" style="margin-left: 33px">
                                    <label>不使用红包&nbsp; <input checked name="red" type="radio" value="1"></label>&nbsp;&nbsp;
                                    <label>使用红包&nbsp;<input name="red" type="radio" value="2"></label>
                                </span>
                            </li>
                            <li :class="{'hide':redpacketList.length<=0}" id="redpacket"
                                style="display: none;height: auto;">
                                <div class="pay-bank" id="pay-bank" v-if="redpacketList.length != 0">
                                    <h6>请选择红包</h6>
                                    <ul id="paysSpan" style="height: auto;">
                                        <li v-for="red in redpacketList">
                                            <input :value="red.id" type="hidden">
                                            <input :value="red.amount" type="hidden">
                                            <div @click="choseRed"
                                                 style="width: 158px;height: 57px;text-align: center;line-height: 53px;cursor: pointer">
                                                {{red.name}}
                                            </div>
                                            <em></em>
                                            <i style="background: none"></i>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pay-bank" v-if="redpacketList.length == 0">
                                    <h6>当前无可用红包</h6>
                                </div>
                            </li>
                            <li>
                                <button @click="buy" class="btn-depositok" style="margin-bottom: 30px" type="button">
                                    投资
                                </button>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--验证密码-->
    <div id="checkDiv" style="display: none">
        <div style="display: block;">
            <div class="alert-main">
                <form id="activeEmail" method="post" name="activeEmail" onsubmit="return false;">
                    <ul>
                        <li>
                            <label class="txt-name">支付密码</label>
                            <input class="txt235" placeholder="请输入支付密码" type="password" v-model="payPassword">
                        </li>
                        <button @click="checkPass" class="btn-ok txt-right" style="margin-bottom: 50px" type="button">
                            确认购买
                        </button>
                    </ul>
                </form>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/script/product_list.js}" type="text/javascript"></script>
<script th:src="@{/echarts/echarts.min.js}" type="text/javascript"></script>
<script th:src="@{/echarts/macarons.js}" type="text/javascript"></script>
<script type="text/javascript">

    const pid = $('#pid').val();
    const baseUrl = '[[@{/base/}]]';

    new Vue({
        el: '#app',
        data: {
            product: {}, //投标产品
            loan: {},//贷款
            user: {},//登陆用户
            //登陆用户的投资数量
            countInvest: 0,
            thisInvestList: [],//当前项目的所有投资
            redpacketList: [],//用户红包泪飙
            //投资
            invest: {
                uid: 0,
                pid: 0,
                investMoney: 0,
                investDate: '',
                endDate: '',
                lockDate: 0,
                profit: 0
            },
            pager: {
                currPage: 1,
                pageSize: 10,
                totalRow: 0,
                totalPage: 0
            },
            //投资金额
            investMoney: '',
            //实际支付金额
            realpay: 0,
            //红包金额
            redpacket: 0,
            //红包id
            redId: 0,
            //收益
            profit: 0,
            //支付密码
            payPassword: ''
        },
        filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d;
            },
            formatDouble: function (value) {
                return (value).toFixed(2);
            },
            numberFormat: function (val) {
                val = parseFloat((val + "").replace(/[^\d\.-]/g, "")).toFixed(2) + "";
                var l = val.split(".")[0].split("").reverse(),
                    r = val.split(".")[1];
                let t = "";
                for (i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            },
            urlFilter: function (val) {
                return '[[@{/}]]' + val;
            }
        },
        watch: {
            //监听输入的投资金额
            investMoney: function (val) {
                let total = this.product.total - this.product.haveMoney; //剩余可投
                let purchaseAmount = this.product.purchaseAmount; // 起购金额
                let balance = this.user.balance;//用户余额
                let reg = /^\d+$|^\d+[.]?\d+$/;
                if (val == '') {
                    this.profit = 0;
                    this.realpay = 0;
                    return;
                }

                if (!reg.test(val)) {
                    layer.msg('请输入正确的投资金额', {
                        time: 1000,
                        icon: 5
                    });
                    this.investMoney = val.substr(0, val.length - 1);
                    return;
                }
                if (val > balance) {
                    layer.msg('余额不足', {
                        time: 1000,
                        icon: 5
                    });
                    this.investMoney = val.substr(0, val.length - 1);
                    return;
                }
                if (val > total) {
                    layer.msg('剩余可投' + total, {
                        time: 1000,
                        icon: 5
                    });
                    this.investMoney = total;
                    return;
                }
                //更新项目投资金额
                this.invest.investMoney = val;
                let lockDate = this.product.lockDateMonth;
                let rate = this.product.rate;
                //更新收益
                this.profit = ((val * rate) / 12 * lockDate).toFixed(2);
                //更新实际支付金额
                this.realpay = val;
            },
            payPassword: function (val) {
                let reg = /^\d+$|^\d+[.]?\d+$/;
                if (val == '') return;
                if (!reg.test(val)) {
                    this.payPassword = '';
                    layer.msg('只能输入数字', {
                        icon: 0,
                        time: 1000
                    });

                }
            }
        },
        methods: {
            //加载投资产品
            loadProduct: function () {
                axios.get(baseUrl + 'product/' + pid)
                    .then(response => {
                        console.log(response);
                        this.product = response.data.object;
                        if (this.product.type == 4) {
                            this.loadLoan(this.product.loanId);
                        }
                        let time = new Date();
                        time.setMonth(time.getMonth() + this.product.lockDateMonth);
                        time.setTime(time.getTime() + 24 * 60 * 60 * 1000);
                        $('.plan-content .p2').eq(2).text(time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate());
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //加载贷款详情
            loadLoan: function (lid) {
                axios.get(baseUrl + 'product/loan/' + lid)
                    .then(response => {
                        this.loan = response.data.obj;
                    })
                    .catch(error => console.log(error));
            },
            //加载这个产品的投资列表
            loadThisInvest: function () {
                axios.get(baseUrl + 'product/invest/' + pid, {
                    params: {
                        currPage: this.pager.currPage
                    }
                })
                    .then(response => {
                        this.thisInvestList = response.data.obj.invests;
                        this.pager = response.data.obj.pager;
                        this.initPage();
                    })
                    .catch(error => console.log(error));
            },
            //加载用户信息
            loadUser: function () {
                axios.get(baseUrl + 'invest/user')
                    .then(response => {
                        this.user = response.data.obj;
                        console.log(response.data.obj);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            //加载用户投资数量
            loadCountInvest: function () {
                axios.get(baseUrl + 'product/countInvest')
                    .then(response => {
                        this.countInvest = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //加载用户红包
            loadUserRedpacket: function () {
                axios.get(baseUrl + 'invest/getRedpacket', {
                    params: {
                        uid: this.user.id,
                        state: 1
                    }
                })
                    .then(response => {
                        this.redpacketList = response.data.obj;
                        console.log(response.data.obj);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            choseRed: function () {
                //选择红包
                let _this = this;
                $('#paysSpan li div').click(function () {
                    if (_this.investMoney == 0) {
                        layer.msg('请先输入投资金额', {
                            icon: 3
                        });
                        return;
                    }
                    $(this).addClass('on')
                        .siblings('i').css('background', 'url([[@{/images/grzx.png}]]) 0 -399px')
                        .parent().siblings().children('div').removeClass('on')
                        .siblings('i').css('background', 'none');
                    let redId = $(this).siblings('input')[0];
                    let redmoney = $(this).siblings('input')[1];
                    _this.redpacket = $(redmoney).val();
                    _this.redId = $(redId).val();
                })
            },
            //重置红包
            resetRed: function () {
                this.redpacket = 0;
                this.redId = 0;
                //去掉选中红包样式
                $('#paysSpan li div').removeClass('on').siblings('i').css('background', 'none');
                $('#redpacket').slideUp();
                //选中不使用红包
                let redradio = $('#red input')[0];
                $(redradio).prop('checked', true);
            },
            //购买弹窗
            showBuy: function () {
                let load = layer.load(1);
                //查询是否登陆
                axios.get(baseUrl + 'invest/user')
                    .then(response => {
                        layer.close(load);
                        this.user = response.data.obj;
                        if (this.user == null) {
                            layer.msg('请先登陆', {
                                icon: 3,
                                time: 1500
                            }, function () {
                                location.href = '[[@{/login}]]';
                            });
                        } else {
                            //刷新项目信息
                            this.loadProduct();
                            //刷新红包
                            this.loadUserRedpacket();
                            //刷新用户投资数
                            this.loadCountInvest();
                            let _this = this;
                            layer.open({
                                type: 1,
                                title: '投资',
                                content: $('#buyDiv'),
                                area: ['500px', '500px'],
                                success: function (layero, index) {
                                    //是否使用红包
                                    $('#red input').change(function () {
                                        let val = $('#red input:checked').val();
                                        if (val == 2) {
                                            //显示红包
                                            $('#redpacket').slideDown();
                                        } else {
                                            //重置红包
                                            _this.resetRed();
                                        }
                                    });
                                },
                                cancel: function (index, layero) {
                                    //重置红包
                                    _this.resetRed();
                                    layer.close(index);
                                }
                            });
                        }
                    })
                    .catch(error => {
                        layer.close(load);
                        console.log(error);
                    });
            },
            //购买
            buy: function () {
                //如果是新手标
                if (this.product.type == 1) {
                    if (this.countInvest >= 3) {
                        layer.msg('未满足购买条件', {
                            time: 1000,
                            icon: 4
                        });
                        return;
                    }
                }
                if (this.investMoney <= 0) {
                    layer.msg('投资金额不能小于0', {
                        time: 1000,
                        icon: 5
                    });
                    return;
                }
                let purchaseAmount = this.product.purchaseAmount; // 起购金额
                if (this.user.balance < purchaseAmount) {
                    layer.msg('起投金额' + purchaseAmount + ', 您当前可用余额不足！', {
                        time: 1000,
                        icon: 5
                    });
                    return;
                }
                if (this.investMoney < purchaseAmount) {
                    layer.msg('起投金额' + purchaseAmount, {
                        time: 1000,
                        icon: 5
                    });
                    this.investMoney = purchaseAmount;
                    return;
                }
                if (this.investMoney % 100 != 0) {
                    layer.msg('请输入100的倍数', {
                        time: 1000,
                        icon: 0
                    });
                    this.investMoney = purchaseAmount;
                    return;
                }
                let _this = this;
                //验证密码
                layer.open({
                    type: 1,
                    title: '验证支付密码',
                    content: $('#checkDiv'),
                    area: ['461px', '226px'],
                    cancel: function (index, layero) {
                        _this.payPassword = '';
                    }
                });

            },
            //验证密码
            checkPass: function () {
                if (this.payPassword.trim() == '') {
                    layer.msg('请输入支付密码', {
                        icon: 0,
                        time: 1000
                    });
                    return;
                }
                //验证密码
                let load = layer.load();
                axios.get(baseUrl + 'invest/checkPayPass', {
                    params: {
                        uid: this.user.id,
                        pass: this.payPassword
                    }
                })
                    .then(response => {
                        layer.close(load);
                        let data = response.data;
                        if (data.obj) {
                            this.submitBy();
                        } else {
                            layer.msg(data.msg, {
                                icon: 0,
                                time: 1000
                            });
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        layer.close(load);
                    });

            },
            //提交购买
            submitBy: function () {
                //提交
                let load = layer.load();
                let a = JSON.stringify(this.invest);
                console.log(a);
                axios.post(baseUrl + 'invest/', {
                    uid: this.user.id,
                    pid: this.product.pid,
                    investMoney: this.invest.investMoney,
                    lockDate: this.product.lockDateMonth,
                    profit: this.profit,
                    //红包id
                    rid: this.redId
                })
                    .then(response => {
                        layer.close(load);
                        let data = response.data;
                        if (data.status == 500) {
                            layer.msg(data.msg, {
                                icon: 2,
                                time: 2000
                            }, function () {
                                location.reload();
                            });
                            return;
                        }
                        let _this = this;
                        console.log(response);
                        layer.msg('投资成功', {
                            icon: 1,
                            time: 2000
                        }, function () {
                            _this.resetRed();
                            location.href = '[[@{/per/investlist?option=1}]]';
                        })
                    })
                    .catch(error => {
                        layer.close(load);
                        console.log(error);
                    });
            },
            //初始化分页
            initPage: function () {
                //生成分页
                let _this = this;
                if (this.thisInvestList.length <= 0) {
                    $('.page').hide();
                    return;
                }
                $('.page').show();
                $('.page').createPage({
                    totalPage: this.pager.totalPage,
                    currPage: this.pager.currPage,
                    //点击页码
                    backFn: function (p) {
                        console.log("回调函数：" + p);
                        _this.pager.currPage = p;
                        _this.loadThisInvest();
                    }
                });
                //选中当前页码
                $('.page > a.page_num').each(function (i, e) {
                    if (parseInt($(e).text()) == _this.pager.currPage) {
                        $(e).addClass('curr');
                    }
                });
            },
            createECharts: function () {
                axios.get(baseUrl + 'product/countInvestByMoney/' + pid)
                    .then(response => {
                        let data = response.data.obj;
                        let myChart = echarts.init(document.getElementById('money'), 'macarons');
                        // 指定图表的配置项和数据
                        myChart.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b} : {c} ({d}%)'
                            },
                            legend: {
                                type: 'scroll',
                                orient: 'vertical',
                                right: 10,
                                //top: 20,
                                //bottom: 20,
                                data: data.legendData
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['40%', '50%'],
                                    data: data.seriesData,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        });
                    })
                    .catch(error => console.log('服务器错误'));
                axios.get(baseUrl + 'product/countInvestBySex/' + pid)
                    .then(response => {
                        let data = response.data.obj;
                        let myChart = echarts.init(document.getElementById('sex'), 'macarons');
                        // 指定图表的配置项和数据
                        myChart.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b} : {c} ({d}%)'
                            },
                            legend: {
                                type: 'scroll',
                                orient: 'vertical',
                                right: 10,
                                //top: 20,
                                //bottom: 20,
                                data: data.legendData
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['40%', '50%'],
                                    data: data.seriesData,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        });
                    })
                    .catch(error => console.log('服务器错误'));

            }
        },
        //页面加载完执行
        mounted() {
            //加载项目详细信息
            this.loadProduct();
            //加载该项目的投资
            this.loadThisInvest();
            //生成图表
            this.createECharts();
        }
    });
    /*个人中心-提现 到账金额*/
    $("#dzje").hover(function () {
        $(".dzarrow-show").css("display", "block");
        $(".dzicon-show").css("display", "block");
    }, function () {
        $(".dzarrow-show").css("display", "none");
        $(".dzicon-show").css("display", "none");
    });

    let $date_tip = $('.plan-content .p2');
    let now = new Date();
    //今天的时间
    let today = now;
    $date_tip.eq(0).text(today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate());
    //明天的时间
    let nextday = now;
    nextday.setTime(now.getTime() + 24 * 60 * 60 * 1000);
    $date_tip.eq(1).text(nextday.getFullYear() + "-" + (nextday.getMonth() + 1) + "-" + nextday.getDate());

</script>
</body>
</html>
